<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>惠州市宇林源科技有限公司-新闻中心</title>
    <!-- 关于我们样式 -->
    <link rel="stylesheet" href="css/news.css">
    <link rel="stylesheet" href="lib/wow/css/libs/animate.css">
    <!-- Jquery包 -->
    <script src="js/jquery/jquery-3.5.1.min.js"></script>
</head>
<body>
    <!-- 头部导航栏 -->
    <div id="header"> 
        <div class="nav">
            <a href="" class="logo"><img src="images/logo.png" alt="" srcset=""></a>
            <div id="nav-btn" class="btn">
                <img src="images/Menu.png" style="margin: 5px;width: 30px;height: 30px;" alt="" srcset="">
            </div>
            <ul class="nav-bar">
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于我们</a></li>
                <li><a href="news.html">新闻中心</a></li>
                <li><a href="#">产品中心</a></li>
                <li><a href="#">服务与支持</a></li>
                <li><a href="#">店铺直购</a></li>
                <li style="border-bottom: 0;">
                    <select style="border-bottom: 1px solid #ccc;" name="" id="">
                        <option value="">中文简体</option>
                        <option value="">英文</option>
                        <option value="">日文</option>
                    </select>
                </li>
            </ul>
        </div>
    </div>
    <!-- /头部导航栏 -->
    <!-- 轮播图 -->
    <div class="banner">
        <div class="container">
            <div class="title">
                <p>新闻中心</p>
            </div>
            <span>News Center</span>
        </div>
    </div>
    <!-- /轮播图 -->
    <div class="content">
        <div class="content-nav">
            <div class="list_dl wow bounceInLeft">
                <div class="list_title">
                    <span>新闻中心</span>
                </div>
                <div class="list_c">
                    <div class="list_dt active">
                        <span class="_after"></span>
                        <p>新闻中心</p>
                    </div>
                    <div class="list_dt">
                        <span class="_after"></span>
                        <p>公司动态</p>
                    </div>
                    <div class="list_dt">
                        <span class="_after"></span>
                        <p>行业新闻</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-article wow bounceInRight">
            <div class="article-title">
                <span>新闻中心</span>
            </div>
            <div class="container">
                <div class="list">
                    <img src="images/new-1.png" alt="" srcset="">
                    <div class="content">
                        <div class="title">
                            <span>新闻标题</span>
                        </div>
                        <div class="status">
                            <span class="time">1小时前</span>
                        </div>
                    </div>
                </div>
                <div class="list">
                    <img src="images/new-2.jpg" alt="" srcset="">
                    <div class="content">
                        <div class="title">
                            <span>新闻标题</span>
                        </div>
                        <div class="status">
                            <span class="time">1小时前</span>
                        </div>
                    </div>
                </div>
                <div class="list">
                    <img src="images/new-3.jpg" alt="" srcset="">
                    <div class="content">
                        <div class="title">
                            <span>新闻标题</span>
                        </div>
                        <div class="status">
                            <span class="time">3小时前</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部联系方式 -->
    <div class="footer">
        <div class="footer-logo">
            <img src="images/logo.png" alt="" srcset="">
        </div>
        <div class="footer-content">
            <div class="footer-copyright">
                <span>版权所有@惠州市宇林源科技有限公司</span>&nbsp;<span>粤ICP备123456</span>
            </div>
            <div class="footer-record">
                <span>粤公网安备126354812</span>
            </div>
            <div class="footer-touch">
                <span>地址：惠州市</span>&nbsp;<span>电话:134-1253-5632</span>
            </div>
            <div class="footer-co">
                <span>传真010-123456</span>
                <span>邮箱：123@qq.com</span>
                <span>客服电话：123</span>
            </div>
        </div>
        <div class="footer-qr">
            <div class="qr">
                <img src="images/gongzhonghao.png" alt="">
                <p>关注惠州市宇林源科技有限公司</p>
            </div>
        </div>
    </div>
    <!-- /底部联系方式 -->
    <script src="lib/wow/dist/wow.js"></script>
    <script>
        new WOW().init();
    </script>
    <!-- 导航栏 -->
    <script type="text/javascript">
        // 开关状态
    var open = false;
        $('#nav-btn').click(function (){
                // 按钮状态
        $(this).css("background-color", open ? '' : '');
        var navBar = $('.nav-bar');
                // 设置header的高度，将导航列表显示出来
        var height = navBar.offset().top + navBar.height();
        $('#header').animate({
            height: open ? 80 : height
        });
                // 修改开关状态
        open = !open;
    });
    </script>
</body>
</html>